<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="detail-block-1 flex-y-center">
            <view v-if="data.order_type=='r'">
                <view class="flex-row">
                    <view class="flex-grow-0 t-color">交易金额</view>
                    <view :class="['flex-grow-1',data.list.flag==0?'record-3':'record-4']">{{data.list.pay_price}}</view>
                </view>
                <view class="flex-row">
                    <view class="flex-grow-0 t-color">赠送金额</view>
                    <view :class="['flex-grow-1',data.list.flag==0?'record-3':'record-4']">{{data.list.send_price}}</view>
                </view>
            </view>
            <view class="flex-row" v-else>
                <view class="flex-grow-0 t-color">交易金额</view>
                <view  :class="['flex-grow-1',data.list.flag==0?'record-3':'record-4']">{{data.list.pay_price}}</view>
            </view>
        </view>
        <view class="detail-block-1">
            <view class="flex-row" style="margin-top:16upx;">
                <view class="flex-grow-0 t-color">交易时间</view>
                <view class="flex-grow-1">{{data.list.time}}</view>
            </view>
            <view class="flex-row" style="margin-top:32upx;">
                <view class="flex-grow-0 t-color">交易内容</view>
                <view class="flex-grow-1">{{data.list.content}}</view>
            </view>
            <view class="flex-row" style="margin-top:32upx;margin-bottom:16upx;" v-if="data.list.order_no">
                <view class="flex-grow-0 t-color">交易单号</view>
                <view class="flex-grow-1">{{data.list.order_no}}</view>
            </view>
            <view class="flex-row" style="padding-top:16upx;margin-bottom:16upx;" v-if="data.list.order_refund_no">
                <view class="flex-grow-0 t-color">退款单号</view>
                <view class="flex-grow-1">{{data.list.order_refund_no}}</view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {},
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var e = this;
        e.setData(t), myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.recharge.detail,
            method: "GET",
            data: {
                order_type: t.order_type,
                id: t.id
            },
            success: function(t) {
                e.getApp.core.hideLoading(), 0 == t.code ? e.setData({
                    list: t.data
                }) : e.getApp.core.showModal({
                    title: "提示",
                    content: t.msg
                });
            }
        });
    },
    onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
    },
    onHide: function() {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function() {
        myVue.getApp.page.onUnload(this);
    }
	}
</script>

<style scoped>
page {
    background-color: #fff;
}

.detail-block-1 {
    border-top: 1upx solid #e3e3e3;
    padding: 24upx;
    min-height: 140upx;
}

.detail-block-1:last-child {
    border-bottom: 1upx solid #e3e3e3;
}

.t-color {
    color: #999;
    margin-right: 40upx;
    width: 160upx;
}

.record-3 {
    font-size: 13pt;
    color: #ff4544;
}

.record-4 {
    font-size: 13pt;
    color: #3fc24c;
}
</style>
